<template>
  <div id="salaryDetails">
    <div class="pageHeader">
      <div class="left">
        <div class="company">{{ company }}</div>
        <div class="title">
          <span>{{ headerInfo.name }}</span>
          &nbsp;
          <span>{{ headerInfo.year }}年{{ headerInfo.month }}月</span>
        </div>
        <div class="period">工资周期：{{ headerInfo.period }}</div>
        <!-- <div class="stage">个税所属期：{{ headerInfo.stage }}</div> -->
        <div class="stage">个税所属期：{{ headerInfo.taxYear }}.{{ headerInfo.taxMonth }}</div>
      </div>
    </div>
    <div class="pageHead">
      <el-form :model="form" label-width="auto" inline class="left">
        <el-form-item>
          <el-select v-model="form.department" class="maxSelect" placeholder="部门选择" clearable>
            <el-option v-for="item in departmentArr" :key="item.departmentid" :value="item.departmentName" :label="item.departmentName" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.person" class="maxSelect" placeholder="人员/工号" clearable />
        </el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-popover popper-class="popover">
          <div class="left">
            <div class="block"><span>岗位：</span> <el-input v-model="form.job" class="maxSelect" /></div>
            <div class="block">
              <span>员工类型：</span>
              <el-select class="maxSelect" v-model="form.type" clearable>
                <el-option v-for="item in registerTypeList" :key="item.key" :label="item.value" :value="item.key" />
              </el-select>
            </div>
            <!-- <div class="block"><span>合同公司：</span> <el-input v-model="form.company" class="maxSelect" /></div> -->
          </div>
          <span slot="reference" class="more">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
        </el-popover>
      </el-form>
      <template>
        <div class="right">
          <div class="right">
            <el-button type="primary" :loading="loading || operationLoading.RegenerateWages" @click="onSave">保存</el-button>
          </div>
          <div class="right" v-show="active == 0">
            <el-button type="primary" @click="isImportPop = true">导入工资数据</el-button>
            <!-- <el-button type="primary">引入人员</el-button> -->
            <el-popconfirm class="salaryDetails-button" popper-class="salaryDetails-popconfirm" title="确认要重新计算吗?" @confirm="onRecount">
              <el-button slot="reference" type="primary" :loading="loading || operationLoading.RegenerateWages">重新计算</el-button>
            </el-popconfirm>
            <el-button type="primary" @click="onBatchEdit">批量修改</el-button>

            <el-dropdown style="line-height: initial; margin-left: 10px" @command="handleCommand" :hide-on-click="false" trigger="click">
              <el-button type="primary">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-cascader-panel :options="options"></el-cascader-panel> -->
                <el-dropdown-item command="delete">删除</el-dropdown-item>
                <el-dropdown-item command="grantPayslip">发放工资条</el-dropdown-item>
                <el-dropdown-item command="payrollCredit">代发工资</el-dropdown-item>
                <el-dropdown-item :disabled="exportLoading">
                  <el-dropdown @command="exportCommand" class="dropdown-two" placement="left" :show-timeout="0" trigger="click">
                    <span>导出</span>
                    <el-dropdown-menu>
                      <el-dropdown-item command="0">导出当前表</el-dropdown-item>
                      <el-dropdown-item command="all">导出全表</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
                <el-dropdown-item :disabled="printLoading">
                  <el-dropdown @command="printCommand" class="dropdown-two" placement="left" :show-timeout="0" trigger="click">
                    <span>打印</span>
                    <el-dropdown-menu>
                      <el-dropdown-item command="0">打印当前表</el-dropdown-item>
                      <el-dropdown-item command="all">打印全表</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="right" v-show="active == 1">
            <!-- 考勤时长 -->
            <el-button type="primary" @click="isImportClockingPop = true">导入数据</el-button>
          </div>
          <div class="right" v-show="active == 2">
            <!-- 社保公积金 -->
            <el-button type="primary" @click="isImportFundPop = true">导入数据</el-button>
          </div>
          <div class="right" v-show="active == 3">
            <!-- 专项附加扣除 -->
            <el-button type="primary" @click="isImportDeductionPop = true">导入数据</el-button>
            <el-button type="primary" @click="onBatchEdit">批量修改</el-button>
          </div>
          <el-dropdown v-show="active != 0" style="line-height: initial; margin-left: 10px" @command="handleCommand" :hide-on-click="false">
            <el-button type="primary">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :disabled="exportLoading" :command="`export_${active}`">导出</el-dropdown-item>
              <el-dropdown-item :disabled="printLoading" :command="`print_${active}`">打印</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </template>
    </div>
    <div class="pageMain" v-loading="loading">
      <el-tabs v-model="active" @tab-click="onTabClick">
        <el-tab-pane label="工资表" lazy>
          <salary-table ref="table1" v-model="tableData" :head-list.sync="headList.table1" />
        </el-tab-pane>
        <el-tab-pane label="考勤时长" lazy>
          <salary-table ref="table2" v-model="tableData" :head-list.sync="headList.table2" />
        </el-tab-pane>
        <el-tab-pane label="社保公积金" lazy>
          <salary-table ref="table3" v-model="tableData" :head-list.sync="headList.table3" />
        </el-tab-pane>
        <el-tab-pane label="专项附加扣除" lazy>
          <salary-table ref="table4" v-model="tableData" :head-list.sync="headList.table4" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 工资表导入 -->
    <import-salary-pop :is-pop.sync="isImportPop" :attribute.sync="modifiableAttribute" :type="0" @down="wagesDownTemplate" @import="importTemplate" />
    <!-- 考勤扣款导入 -->
    <import-clocking-pop :is-pop.sync="isImportClockingPop" :attribute.sync="modifiableAttribute" :type="1" @down="wagesDownTemplate" @import="importTemplate" />
    <!-- 公积金导入 -->
    <import-fund-pop :is-pop.sync="isImportFundPop" :attribute.sync="modifiableAttribute" :type="2" @down="wagesDownTemplate" @import="importTemplate" />
    <!-- 专项附加扣除导入 -->
    <import-deduction-pop :is-pop.sync="isImportDeductionPop" :attribute.sync="modifiableAttribute" :type="3" @down="wagesDownTemplate" @import="importTemplate" />
    <!-- 批量修改 -->
    <batch-edit-pop :is-pop.sync="isBatchPop" :list.sync="selectedList" :modifiable-attribute.sync="modifiableAttribute" @affirm="onAffirm" />
    <!-- 打印设置 -->
    <print-pop :is-pop.sync="isPrintPop" :head-list.sync="headList" :number.sync="printNumber" :params.sync="params" />
  </div>
</template>
<script>
// 表格
import salaryTable from "./components/salaryTable.vue";
// 弹窗
import importSalaryPop from "./components/importSalaryPop.vue";
import importClockingPop from "./components/importClockingPop.vue";
import importFundPop from "./components/importFundPop.vue";
import importDeductionPop from "./components/importDeductionPop.vue";
import batchEditPop from "./components/batchEditPop.vue";
import printPop from "./components/printPop.vue";
// 引入方法
import tableColumn from "./components/tableColumn.vue";
import { getDepartmentView } from "@/util/xc/utils";
import { mapMutations, mapState } from "vuex";

import bus from "./eventBus/eventBus";
import { formulaSum } from "./formula/index";
import { ITEMS, SOURCE } from "./config/config";
// 计算混入
import { countMixins } from "./components/mixins/countMixins";
export default {
  name: "salaryDetails",
  components: {
    salaryTable,
    importSalaryPop,
    importClockingPop,
    importFundPop,
    importDeductionPop,
    batchEditPop,
    printPop
  },
  mixins: [countMixins],
  data() {
    return {
      headerInfo: {
        name: "薪资测试",
        year: "2022",
        month: "4",
        period: "2022.03.01-2022.03.31",
        taxYear: "2022",
        taxMonth: "3"
      },
      form: {},
      active: 0,
      departmentArr: [],
      company: "",
      tableDataAll: [],
      tableData: [],
      registerTypeList: [],

      isImportPop: false,
      isImportClockingPop: false,
      isImportFundPop: false,
      isImportDeductionPop: false,
      isBatchPop: false,
      isPrintPop: false,

      loading: false,

      selectedList: [], // 与选择人员
      modifiableAttribute: [], // 可修改属性

      headList: {
        table1: []
      }, // 四个表格表头
      headThList: {},

      params: {}, // 跳转所需参数
      exportLoading: false,
      printLoading: false,
      printNumber: ""
    };
  },
  computed: {
    ...mapState({
      companyList: state => state.reward.companyList,
      userInfo: state => state.common.userInfo,
      operationLoading: state => state.setStorage.operationLoading
    })
  },
  methods: {
    ...mapMutations(["setOperationLoading"]),
    // 导入相关
    ...{

      /** 下载模板 */
      async wagesDownTemplate({ type }) {
        const { subId, wagesId: Id } = this.params;
        const subCompanyName = this.companyList?.find(item => item.subid == subId)?.subName;
        const arr = Array(4).fill(false);
        arr[type] = true;
        const [isSelectWage, isSelectAtt, isSelectSsaf, isSelectSad] = arr;

        const params = {
          subCompanyName,
          isSelectWage, // 工资表
          isSelectSsaf, // 社保公积金
          isSelectAtt, // 考勤
          isSelectSad, // 附加扣除
          subId,
          companyId: this.userInfo.CompanyId,
          Id
        };
        const { data, message = "请求成功" } = await this.$api.smartSalary.wagesDownTemplate(params).then(res => res.data);
        this.$message({ message, type: "success" });
        window.open(data);
      },

      /** 导入模板 */
      async importTemplate({ type, formdata, columnsPy = [], fn }) {
        // 1工资表；2考勤表；3社保公积金表；4专项附加扣除
        try {
          console.log(type + 1);
          const { subId, wagesId: Id } = this.params;
          const params = {
            tableType: type + 1,
            allIn: !columnsPy.length,
            columnsPy,
            subId,
            companyId: this.userInfo.CompanyId,
            Id
          };
          console.log(params, formdata);
          const { data } = await this.$api.smartSalary.wagesImport(params, formdata).then(res => res.data);
          this.$message({ message: "正在导入数据", type: "success" });
          fn(true);
        } catch {
          fn();
        }
      }
    },
    getCurrentRef() {
      return this.$refs?.["table" + (Number(this.active) + 1)];
    },
    // 按钮相关
    ...{
      async onSave() {
        try {
          console.group("开始保存", this.tableDataAll, this.copyData);
          this.loading = true;
          let { itemList, attList, ssafList, sadList } = this.copyData;
          console.log(JSON.parse(JSON.stringify(itemList)));
          this.handleSaveData(itemList, 1);
          this.handleSaveData(attList, 2);
          this.handleSaveData(ssafList, 3);
          this.handleSaveData(sadList, 4);
          const yfWages = this.countTotal(ITEMS.SHOULD_SALARY[0]);
          const sfWages = this.countTotal(ITEMS.ACTUAL_SALARY[0]);
          const peopleNumber = this.tableDataAll.length;
          const taxPayable = this.countTotal(ITEMS.ACCUMULATED_TAXABLE[0]);
          const params = {
            ...this.copyData,
            itemList,
            attList,
            ssafList,
            sadList,
            headList: [],
            attHeadList: [],
            ssafHeadList: [],
            sadHeadList: [],
            yfWages,
            sfWages,
            peopleNumber,
            taxPayable
          };
          console.log(params);
          const { data, message = "保存成功" } = await this.$api.smartSalary.saveWages(params).then(res => res.data);
          this.$message({ message, type: "success" });
          console.groupEnd();
        } finally {
          this.loading = false;
        }
      },
      async handleCommand(name = "") {
        if (name == "") return;
        if (name.startsWith("export")) this.exportCommand(name.split("_")[1]);
        else if (name.startsWith("print")) this.printCommand(name.split("_")[1]);
        else if (name === "delete") this.executeDelete();
        else if (name === "grantPayslip") {
          const { wagesId, tempId, month, year } = this.params;
          let params = {
            tempId,
            wagesId,
            sourceType: 1,
            userIdList: [],
            confirmWay: 0
          };
          const {
            data: { payslipId }
          } = await this.$api.electronicPayslip.GetPaySlipTempList(params).then(res => res.data);
          this.$router.push({ name, query: { wagesId, tempId, month, year, payslipId } });
        } else this.$router.push({ name });
      },

      /** 导出命令 */
      async exportCommand(name) {
        try {
          // this.exportLoading = true;
          const { subId, wagesId: Id } = this.params;
          const subCompanyName = this.companyList?.find(item => item.subid == subId)?.subName;
          const arr = Array(4).fill(false);
          name == "all" ? arr.fill(true) : arr[[0, 1, 2, 3]?.[name]] = true;
          const [isSelectWage, isSelectSsaf, isSelectAtt, isSelectSad] = arr;
          const params = {
            subCompanyName,
            isSelectWage, // 工资表
            isSelectSsaf, // 社保公积金
            isSelectAtt, // 考勤
            isSelectSad, // 附加扣除
            subId,
            companyId: this.userInfo.CompanyId,
            Id // 工资表id
          };
          const { data, message } = await this.$api.smartSalary.wagesExport(params).then(res => res.data);
          this.$message({ message, type: "success" });
          window.open(data);
        } finally {
          this.exportLoading = false;
        }
      },

      /** 打印命令 */
      async printCommand(number) {
        try {
          // this.printLoading = true;
          this.printNumber = number;
          const newObj = {};
          ["table1", "table2", "table3", "table4"].forEach(key => {
            newObj[key] = this.$refs?.[key]?.tableTh;
          });
          this.headThList = newObj;
          this.isPrintPop = true;
        } finally {
          this.printLoading = false;
        }
      },

      /** 执行删除 */
      executeDelete() {
        const { selectedList } = this.getCurrentRef();
        if (selectedList.length) {
          this.$confirm("确认删除吗", "提示", {}).then(async () => {
            try {
              this.loading = true;
              const { id, subId } = this.$route.query;
              const params = { wageId: id, subId };
              const idArr = selectedList.map(item => item.id);
              console.log(params, idArr);

              const { data, message = "删除成功" } = await this.$api.smartSalary.removeUserWage(params, idArr).then(res => res.data);
              this.onDelRow(this.tableDataAll, idArr);
              this.onDelRow(this.copyData.itemList, idArr);
              this.onDelRow(this.copyData.attList, idArr);
              this.onDelRow(this.copyData.ssafList, idArr);
              this.onDelRow(this.copyData.sadList, idArr);
              this.onSearch();
              this.$message({ message, type: "success" });
            } catch {
              this.$message({ message: "删除失败", type: "error" });
            } finally {
              this.loading = false;
            }
          });
        } else {
          this.$message({ message: "请先选择人员", type: "warning" });
        }
      },

      /** 删除行 */
      onDelRow(arr = [], idArr = []) {
        console.group("执行删除", arr, idArr);
        idArr.forEach(id => {
          const i = arr.findIndex(row => row.id == id);
          console.log("删除索引", i);
          arr.splice(i, 1);
        });
        console.groupEnd();
      },
      onBatchEdit() {
        const { selectedList = [], modifiableAttribute = [] } = this.getCurrentRef() || {};
        if (selectedList.length) {
          this.selectedList = selectedList;
          this.modifiableAttribute = modifiableAttribute;
          this.isBatchPop = true;
        } else {
          this.$message({ message: "请先选择人员", type: "warning" });
        }
      },
      async onRecount() {
        console.time("重新计算");
        const { id, subId } = this.$route.query;
        try {
          this.setOperationLoading({ key: "RegenerateWages", val: true });
          this.loading = true;
          await this.$api.smartSalary.regenerateWages({ id, subId }).then(res => res.data);
          this.$message({ message: "正在重新生成工资表", type: "success" });
          // this.getWagesData(data);
        } catch {
          this.setOperationLoading({ key: "RegenerateWages", val: false });
        } finally {
          this.loading = false;
        }

        // const arr = Object.keys(this.tableData[0]);
        // console.table(JSON.parse(JSON.stringify(this.tableData)));
        // this.tableData.forEach((row) => {
        //   arr.forEach((type) => {
        //     this.switchCount(type, row);
        //   });
        // });
        console.timeEnd("重新计算");
      },
      ...tableColumn.methods,
      onAffirm(e) {
        console.log(e);
        console.time();
        const { key, value, type, fn = () => {} } = e;
        this.selectedList.forEach(item => {
          if (type == "input") {
            this.$set(item, key, value);
          } else {
            this.$set(item, key, Number(value));
            this.switchCount(key, item);
          }
        });
        fn();
        console.timeEnd();
        this.isBatchPop = false;
      }
    },
    // 保存处理数据
    ...{
      handleSaveData(arr, type) {
        console.group("保存数据处理", type, arr);
        arr.forEach(item => {
          const obj = this.tableDataAll.find(row => row.userId == item.userId);
          Object.keys(item).forEach(key => {
            // console.log(key, obj[key]);
            if (!["customColumnList"].includes(key)) item[key] = obj[key];
          });
          item.customColumnList.forEach(custom => {
            custom.columnValue = String(obj[custom.namePy]);
          });
        });
        console.log(JSON.parse(JSON.stringify(arr)));
        console.groupEnd();
      },
      countTotal(key) {
        return formulaSum(this.tableDataAll.map(item => item[key]));
      }
    },
    ...{
      onTabClick() {
        this.$nextTick(() => {
          this.getCurrentRef()?.t_doLayout();
          const { modifiableAttribute = [] } = this.getCurrentRef() || {};
          this.modifiableAttribute = modifiableAttribute;
        });
      }
    },
    onSearch() {
      const { person, department, job, type } = this.form;
      this.tableData = this.tableDataAll.filter(item => {
        if (department && item.departmentName != department) return false;
        if (person && !String(item.userName).includes(person) && !String(item.number).includes(person)) return false;
        if (job && !String(item.position).includes(job)) return false;
        if (type && item.userType != type) return false;
        return true;
      });
      this.$nextTick(() => {
        ["table1", "table2", "table3", "table4"].forEach(key => {
          this.$refs?.[key]?.t_reloadData();
        });
      });
    },
    async initData() {
      try {
        console.time("初始化表格");
        this.form = {};
        this.loading = true;
        this.getRegisterType();
        await this.getWages(1);

        this.onSearch();
      } finally {
        this.loading = false;
        console.timeEnd("初始化表格");
      }
    },
    async getWages(bol = false) {
      if (bol) {
        await this.getWagesData();
        const { subId } = this.$route.query;
        const { data } = await getDepartmentView(subId);
        this.departmentArr = data;
      } else {
        const { name, subId } = this.$route.query;
        const { data } = await getDepartmentView(subId);
        this.departmentArr = data;

        this.tableDataAll = new Array(1000).fill(null).map((k, i) => {
          return {
            userName: "姓名" + i,
            number: i + 1,
            departmentName: this.departmentArr[Math.floor(Math.random() * this.departmentArr.length)].departmentName,
            position: ["研发", "销售", "客服"][Math.floor(Math.random() * 3)]
          };
        });

        const o = this.companyList.find(item => item.subid == subId);
        this.company = o?.subName;
        this.headerInfo.name = name;
      }
    },

    /** 获取员工类型 */
    async getRegisterType() {
      const { data } = await this.$api.commonXc.GetRegistertype().then(res => res.data);
      this.registerTypeList = data;
    },
    // 获取数据处理
    ...{

      /** 获取工资表数据 */
      async getWagesData(data) {
        const { id, subId } = this.$route.query;
        this.params.wagesId = id; // 工资表id
        this.params.subId = subId;

        const params = { id, subId };
        console.log(params);
        try {
          this.loading = true;
          if (!data) data = await this.$api.smartSalary.getWages(params).then(res => res.data.data);

          this.copyData = JSON.parse(JSON.stringify(data));
          await this.getFormula(data.salaryTId);

          const o = this.companyList.find(item => item.subid == data.subId);
          this.company = o?.subName;
          this.headerInfo.name = data.name;
          this.headerInfo.period = data.wagesCycle;
          this.headerInfo.year = this.params.year = data.year;
          this.headerInfo.month = this.params.month = data.month;
          this.headerInfo.taxYear = data.taxYear;
          this.headerInfo.taxMonth = data.taxMonth;

          this.headList = {
            table1: data.headList, //.sort((a, b) => a.sort > b.sort),
            table2: data.attHeadList,
            table3: data.ssafHeadList,
            table4: data.sadHeadList
          };

          this.tableDataAll = data.itemList.map(obj => {
            return {
              ...this.handleTableData(data.sadList, obj.userId),
              ...this.handleTableData(data.ssafList, obj.userId),
              ...this.handleTableData(data.attList, obj.userId),
              ...this.handleTableData(data.itemList, obj.userId)
            };
          });

          await this.getCountSource(
            data.itemList.map(item => item.userId),
            data.subId
          );

          const { modifiableAttribute = [] } = this.getCurrentRef() || {};
          this.modifiableAttribute = modifiableAttribute;

          bus.attendanceObj = {};
          this.tableDataAll.forEach(item => {
            const o = data.attList.find(row => row.userId == item.userId);
            bus.attendanceObj[item.userId] = o?.customColumnList?.filter(item => item.itemNamePy == "qingjiakoukuan").map(item => item.namePy) || [];
          });
          console.log(bus.attendanceObj);

          this.getCurrentRef().selectedList = [];

          // console.table(JSON.parse(JSON.stringify(data.ssafList)));
        } finally {
          this.loading = false;
        }
        if (data) this.onSearch();
      },

      handleTableData(arr, userId) {
        const o = arr.find(item => item.userId == userId);
        const children = {};
        o?.customColumnList?.forEach(item => {
          children[item.namePy] = item.columnValue;
        });
        return { ...o, ...children };
      },

      /** 获取自定义公式 and 工资项 */
      async getFormula(id) {
        this.params.tempId = id; // 工资表模板id
        const {
          data: { columnList, itemList }
        } = await this.$api.smartSalary.getSalaryTemplate({ id }).then(res => res.data);
        const newArr = columnList.filter(item => item.formulaDetail || [2, 6, 10].includes(item.salaryRule));
        console.log(newArr);

        bus.formulaArr = newArr.map(item => {
          if (item.name == "实发工资") {
            item.formulaDetail += "-|" + ITEMS.PERSONAL_INCOME_TAX[2] + "|";
          }
          return item;
        });
        // bus.itemInputArr = itemList.filter((item) => ["个人信息"].includes(item.name)).map((item) => item.id);
        return newArr;
      },

      /** 获取计算数据源 */
      async getCountSource(userIds, subId) {
        const params = {
          year: this.headerInfo.year,
          month: this.headerInfo.month,
          subId,
          companyId: this.userInfo.CompanyId
        };
        const { data } = await this.$api.smartSalary.GetWageCalculateSourceView(params, userIds.map(item => `userIds=${item}`).join("&")).then(res => res.data);
        bus.dataSource = data;
        this.handleSource();
      },
      handleSource() {
        const holiday = {};
        // 考勤
        this.tableDataAll.forEach(row => {
          const data = {
            ...bus.dataSource[SOURCE.ATTEND_DETAIL_DTOS].find(item => item.userId == row.userId)
          };
          // 社保公积金
          // const ssaf = bus.dataSource[SOURCE.SSAF_RULE_ITEM_DTOS].find(item => item.userId == row.userId);
          // ssaf.ruleItemList.forEach(item => {
          //   data[item.projectNamePy] = item.totalAmount;
          // });
          holiday[row.userId] = data;
        });
        // 请假
        bus.dataSource[SOURCE.HOLIDAY_TYPE_VALUE_DTOS].map(item => {
          const o = bus.dataSource[SOURCE.HOLIDAY_TYPE_DTOS].find(type => item.holidayTypeId == type.holidayTypeId);
          if(o) {
            holiday[item.userId][o.holidayNamePy + "shichang"] = item.vacationDuration;
            holiday[item.userId][o.holidayNamePy + "cishu"] = item.vacationCount;
            holiday[item.userId][o.holidayNamePy + "tianshu"] = item.vacationDay;
          }
        });
        bus.holidayData = holiday;
      }
    }
  },
  activated() {
    const { random } = this.$route.query;
    if (random != this.random) {
      this.initData();
    }
    this.random = random;
  },
  created() {
    // this.setOperationLoading({ key: "RegenerateWages", val: false });
  }
};
</script>
<style lang="less">
.salaryDetails-button {
  line-height: initial;
}
.salaryDetails-popconfirm {
  padding: 12px 20px;
  .el-popconfirm__main {
    margin-bottom: 10px;
  }
  .el-popconfirm__action {
    text-align: center;
  }
}
</style>
<style lang="less" scoped>
.maxSelect {
  width: 150px;
}
.popover {
  .left {
    display: flex;
    align-items: center;
    padding: 10px 20px;
  }
  .block {
    display: flex;
    align-items: center;
    span {
      display: block;
    }
  }
}
#salaryDetails {
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  .left,
  .right {
    display: flex;
    align-items: center;
  }
  .pageHeader {
    border-bottom: 1px solid #e3e3e3;
    display: flex;
    justify-content: space-between;
    padding: 0 10px 10px;
    .left > div {
      margin-right: 20px;
      font-size: 12px;
      &.title {
        font-size: 15px;
        font-weight: bold;
      }
      &.company {
        font-size: 15px;
        font-weight: bold;
      }
    }
  }
  .pageHead {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin: 10px 0;
    .el-form-item {
      margin-bottom: 0;
    }
    .more {
      font-size: 12px;
      margin-left: 8px;
      cursor: pointer;
    }
  }
  .pageMain {
    padding: 0 10px;
    margin: 0;
    height: auto;
    flex: 1;
    .el-tabs {
      display: flex;
      flex-direction: column;
      height: 100%;
      :deep( .el-tabs__content ){
        flex: 1;
        .el-tab-pane,
        .plTableBox {
          height: 100%;
        }
      }
    }
  }
  .el-button {
    margin-left: 10px;
  }
  .el-dropdown {
    margin-left: 0 !important;
  }
}

.el-dropdown-menu {
  .dropdown-two {
    width: 100%;
    .el-dropdown-selfdefine {
      width: 100%;
      display: inline-block;
    }
  }
}
</style>
